<template>
	<view class="content">
		<view class="massage">
			<view class="left">
				<text class="font-fm">欢迎您，{{loginusername}}的家长</text>
			</view>
			<view class="right">
				<text>明德实验小学</text>
			</view>
		</view>
		<view class="bigbutton">
			<view class="left-button" @click="goPage(5)">
				<button class="button1"></button>
			</view>
			<view class="right-button" @click="goPage(6)">
				<button class="button2"></button>
			</view>
		</view>
		<view class="shortcut">
			<view class="jihua" @click="goPage(1)">
				<image class="img" src="../../static/image/教学计划.png" mode=""></image>
				<text class="text1">教学计划</text>
			</view>
			<view class="jindu" @click="goPage(2)">
				<image class="img" src="../../static/image/教学进度.png" mode=""></image>
				<text class="text1">教学进度</text>
			</view>
			<view class="fuwu" @click="goPage(3)">
				<image class="img" src="../../static/image/服务热线.png" mode=""></image>
				<text class="text1">服务热线</text>
			</view>
			<view class="fuwu" @click="goPage(4)">
				<image class="img" src="../../static/image/意见反馈.png" mode=""></image>
				<text class="text1">意见反馈</text>
			</view>
		</view>
		<view class="notices">
			<view class="text2">
				公告:
			</view>
			<view class="notice">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000"
					vertical="true" circular="true">
					<swiper-item v-for="announ in announs" :key="announ.id">
					<view class="swiper-item"> {{announ.content}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="task">
			<view class="wait">
				我的待办<img class="jiantou" src="/static/image/首页向下三角形.png" alt="" />
			</view>

			<view v-for="zuoye in zuoyes" :key="zuoye.id" class="overdue" @click="goPage(5)">
				<view v-if="zuoye.status === 0" class="overdue-symbol1">
					待提交作业
				</view>
				<view v-if="zuoye.status === 1" class="overdue-symbol2">
					逾期作业
				</view>
				<view class="zuoye-title">
					{{zuoye.title}}
				</view>
				<view class="zuoye-content">
					{{zuoye.content}}
				</view>
				<view class="zuoye-value">
					<view class="zuoye-teach">
						发起人:
						<view class="tea">{{zuoye.teacherName}}</view>
					</view>
					<view class="zuoye-date">
						发起时间:
						<view class="date">{{zuoye.rekedateTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginusername: '',
				zuoyes: [],
				announs: [],
			}
		},
		onPullDownRefresh() {
			console.log('刷新页面');
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.showAllZuoyes();
			}, 1000)
		},
		methods: {
			goPage(id) {
				console.log(id);
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/jihua/jihua'
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: '/pages/jindu/jindu'
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: '/pages/fuwu/fuwu'
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: '/pages/yijian/yijian'
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: '/pages/zuoye/zuoye'
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: '/pages/daka/daka'
					})
				} else if (id = 7) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getJwtToken() {
				try {
					return wx.getStorageSync('jwt_token');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			// 假设你使用 uni.request 发送请求  
			sendRequestWithToken(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token // 将令牌添加到 Authorization 头部  
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								let list = res.data.data.list;
								list.forEach(item => {
									item.rekedateTime = item.rekedateTime.replace('T', ' ')
								});
								this.loginusername = res.data.data.name;
								this.zuoyes = list;


							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {
					this.goPage(7);
					// 如果没有令牌，处理没有令牌的情况，比如跳转到登录页  
					console.error('No token found, please login first.');
				}
			},
			getAnnoun(url, method) {
				const token = this.getJwtToken();
				if (token) {
					wx.request({
						url: url,
						method: method,
						header: {
							'token': token // 将令牌添加到 Authorization 头部  
						},
						success: (res) => {
							if (res.data.code === 1 && res.data.msg === 'success') {
								let list = res.data.data;
								this.announs = list;

							} else if (res.data.code === 0) {
								uni.showToast({
									title: '登录信息有误',
									icon: null
								});
								this.goPage(7);
								console.error('未登录', res.data.data);
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
							console.error('请求失败', error);
						}
					});
				} else {
					this.goPage(7);
					// 如果没有令牌，处理没有令牌的情况，比如跳转到登录页  
					console.error('No token found, please login first.');
				}

			},
			getuserName() {
				try {
					return wx.getStorageSync('user_name');
				} catch (e) {
					// 处理获取令牌失败的逻辑，比如返回 null 或抛出错误  
					return null;
				}
			},
			// 在某个页面的事件处理函数中  
			showAllZuoyes() {
				const username = this.getuserName();
				if (username) {
					const url = `http://localhost:8080/patra/index/${username}`;
					const method = 'GET';
					this.sendRequestWithToken(url, method);
				} else {
					console.error('用户名未找到')
				}
			},
			showAllAnnouns() {
				const username = this.getuserName();
				if (username) {
					const url = `http://localhost:8080/patra/announ/${username}`;
					const method = 'GET';
					this.getAnnoun(url, method);
				} else {
					console.error('用户名未找到')
				}
			},
			onLoad() {
				this.showAllAnnouns();
				this.showAllZuoyes();
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}

	.massage {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin: 10% 0% 8% 0%;
		height: 100rpx;
		width: 100%;
	}

	.left {
		font-family: AliMamaShuHei;
		font-size: 16px;
		width: 50%;
		height: 100rpx;
		letter-spacing: -0.92px;
		line-height: 28.8px;
		text-align: left;
		padding: 0% 5%;
	}

	.right {
		font-family: AliMamaShuHei;
		font-size: 16px;
		letter-spacing: -0.92px;
		line-height: 28.8px;
		text-align: left;
		padding: 0% 5%;
	}

	.bigbutton {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		height: 160rpx;
		width: 100%;
		margin: 0rpx 0rpx;
	}

	.left-button,
	.right-button {
		height: 160rpx;
		width: 335rpx;

	}

	.left-button {
		margin-left: 4%;

	}

	.right-button {
		margin-right: 4%;

	}

	.button1 {
		height: 160rpx;
		width: 335rpx;
		background-image: url('../../static/image/作业按钮.png');
		background-size: 100% 100%;
		border-radius: 30rpx;
	}

	.button2 {
		height: 160rpx;
		width: 335rpx;
		background-image: url('../../static/image/打卡按钮.png');
		background-size: 100% 100%;
		border-radius: 30rpx;
	}

	.shortcut {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		height: 135rpx;
		width: 710rpx;
		margin: 10% 0% 0% 0%;

	}

	.jihua,
	.jindu,
	.fuwu,
	.yijian {
		display: flex;
		width: 104rpx;
		height: 135rpx;
		flex-direction: column;
	}

	.jihua {
		margin-left: 70rpx;
	}

	.img {
		width: 85rpx;
		height: 85rpx;
		align-content: center;
	}

	.text1 {
		width: 104rpx;
		font-size: 22rpx;
		font-family: AliMamaShuHei;
		align-content: center;
	}

	.notices {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-left: 25rpx;
		width: 700rpx;
		height: 80rpx;
		background-color: #F3F3F3;
		border-radius: 30rpx;
		padding: 0%;
		margin-top: 50rpx;
	}

	.text2 {
		display: flex;
		width: 90rpx;
		height: 80rpx;
		margin-left: 13%;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;

	}

	.notice {
		display: flex;
		align-items: center;
		width: 500rpx;
		height: 80rpx;
		margin-right: 10%;
	}

	.swiper {
		display: flex;
		align-items: center;
		width: 400rpx;
		height: 80rpx;
		margin-right: 10%;
	}

	.swiper-item {
		font-size: 25rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		font-family: AliMamaShuHei;
		margin-left: 20rpx;
	}

	.task {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	}

	.wait {
		margin-top: 40rpx;
		margin-left: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
	}

	.jiantou {
		display: flex;
		align-items: center;
		width: 30rpx;
		height: 25rpx;
	}

	.overdue {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		height: 400rpx;
		margin-left: 35rpx;
		margin-top: 20rpx;
		background-color: #F3F3F3;
		border-radius: 25rpx;
	}

	.overdue-symbol1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 40rpx;
		background-color: #E8EEFF;
		color: #2B62FD;
		border-radius: 30rpx;
		font-size: 22rpx;
		font-weight: bold;
		font-family: AliMamaShuHeu;
		margin: 20rpx 0rpx 0rpx 20rpx;
	}

	.overdue-symbol2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 40rpx;
		background-color: #FFF1EE;
		color: #FA624B;
		border-radius: 30rpx;
		font-size: 22rpx;
		font-weight: bold;
		font-family: AliMamaShuHeu;
		margin: 20rpx 0rpx 0rpx 20rpx;
	}

	.zuoye-title {
		display: flex;
		align-items: center;
		font-weight: bold;
		font-family: AliMamaShuHei;
		width: 500rpx;
		height: 80rpx;
	}

	.zuoye-content {
		display: flex;
		width: 100%;
		height: 200rpx;
		align-items: center;
		justify-content: center;
		margin: 0% 5%;
		font-size: 28rpx;
		font-family: AliMamaShuHei;
	}

	.zuoye-value {
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
	}

	.zuoye-teach {
		display: flex;
		width: 280rpx;
		height: 80rpx;
		justify-items: center;
		font-size: 23rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
	}

	.zuoye-date {
		display: flex;
		justify-items: center;
		height: 80rpx;
		width: 500rpx;
		font-size: 23rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
	}

	.tea {
		margin-left: 20rpx;
	}

	.date {
		margin-left: 20rpx;
	}
</style>